<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <link rel='stylesheet' type='text/css' href='css/css.css' media='all'>
        <script src="JS/jquery_1_10_1_min.js" type="text/javascript"></script>
        <script src='JS/jquery.watermark.js' type="text/javascript"></script>
        <script src="JS/watermask.js" type="text/javascript"></script>     
        <script src="JS/Menu-Tab.js" type="text/javascript"></script>  
        <title>Phòng chat chung</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div id='chatarea-area'>
            <div id='login-head'>
                Khu vực trò chuyện chung
            </div>
            <div id='chatarea-body'>
                <div id='chatarea-left'>
                    <div id='chat-left-title'>
                        Danh sách thành viên:
                    </div>
                    <div id='chat-left-head'>
                        <div class='chat-left-head-ul'>
                            <div id='num-user'>
                                12
                            </div>
                            <div class='num-text'>
                                Users
                            </div>
                        </div><!-- end chat-left-head-ul -->
                        <div class='chat-left-head-ul'>
                            <div id='num-user-on'>
                                4
                            </div>
                            <div class='num-text'>
                                Users online
                            </div>
                        </div><!-- end chat-left-head-ul -->
                    </div><!-- end chat-left-head -->
                    <div id='chat-left-body'>
                        <ul id='chat-left-user-list'>
                            <li><div class='chat-left-uavatar'>
                                    <img src='Images/users.png' width='40' alt='user-avatar'></div>
                                <div class='chat-left-uname'>
                                    admin
                                </div>
                                <div class='chat-left-uonline'>
                                    <img src='Images/online.png' width='20' alt='user-online'>
                                </div>
                            </li>
                        </ul>
                        <div id='user-info'>
                            <div id='user-info-avatar'>
                                <img src='Images/Uploads/users.png' alt='user-avatar' width='50' height='50'>
                            </div>
                            <div id='user-infos'>
                                <div id='user-info-hidden'>
                                <div id='hidden-id' title='1'></div>
                                <div id='hidden-gid' title='1'></div>
                                </div>
                            <div id='user-info-uname'>
                                Admin
                            </div>
                            <div id='user-info-email'>
                                Admin@gmail.com
                            </div>
                            </div>
                        </div>
                    </div><!-- end chat-left-body -->
                </div><!-- end chatarea-left -->
                <div id='chatarea-center'>
                    <div id='chat-center-title'>
                        Chat box:
                    </div>
                    <div id='chat-center-cbox'>
                        <div class='chat-line'>
                            <div class='user-info'>
                                <div class='cbox-user-img'>
                                    <img src='Images/Uploads/940253ef72c1a7351.jpg' width='30' height='30' alt='user-avatar'>
                                </div>
                            <div class='cbox-message'>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                Aliquam varius condimentum arcu, nec lacinia nisl ultrices ut.
                            </div>
                            </div>
                            <div class='user-info-line'>                            
                            <div class='cbox-user-name'>
                                    Admin
                                </div>
                            <div class='cbox-time'>
                                12:12:12
                            </div>
                            </div>
                        </div><!-- end chat-line -->
                        <div class='chat-line'>
                            <div class='user-info'>
                                <div class='cbox-user-img'>
                                    <img src='Images/users.png' width='30' alt='user-avatar'>
                                </div>
                            <div class='cbox-message'>
                                Lorem ipsum dolor sit amet
                            </div>
                            <div class='cbox-message-trans'>
                                Lorem ipsum dolor sit amet
                            </div>  
                            </div>
                            <div class='user-info-line'>                            
                            <div class='cbox-user-name'>
                                    Admin
                                </div>
                            <div class='cbox-time'>
                                12:12:12
                            </div>
                            </div>
                        </div><!-- end chat-line -->
                    </div>
                    <div id='from-chat'>
                        <div id='chat-title'>Nhập nội dung chat:</div>
                        <form name='chatbox' method='POST'>
                        <div id='chat-mess-box'><input type='text' name='message' size='25' id='chat-mess'></div>
                        <div id='chat-mess-button'><input type='submit' name='chat-submit' id='chat-sent' value='Chat'></div>
                        </form>
                    </div>
                </div><!-- end chatarea-center -->
                <div id='chatarea-right'>
                    <div id='chatarea-right-title'>
                        Menu chức năng:
                    </div>
                    <div id='chatarea-right-body'>
                        <ul id='chatarea-right-menu'>
                            <li><a href='' class='menu-icon'><img src='Images/creat-icon.png' alt='create-room' title='Tạo phòng chat'></a></li>
                            <li><a href='' class='menu-icon'><img src='Images/chat-icon.png' alt='search-room' title='Tìm phòng chat'></a></li>
                            <li><a href='' class='menu-icon'><img src='Images/exit-icon.png' alt='exit-room' title='Thoát phòng chat'></a></li>
                        </ul>
                        <div id='chatarea-right-clist-title'>
                            Danh sách phòng chat:
                        </div>
                        <div id='list-chatgroup'>
                            <ol id='navitab'>
                                <li class='tab activetab' value="1">Chung</li>
                                <li class='tab' value='2'>Riêng</li>
                                <li class='tab' value='3'>Tự Tạo</li>
                            </ol>
                            <div id='chung' class='chatarea-right-clist'>
                                <ul>
                                    <li><a href='' class='menu-b'>Phòng chat a</a></li>
                                    <li><a href='' class='menu-b'>Chat với admin</a></li>
                                </ul>
                            </div>
                            <div id='rieng' class='chatarea-right-clist'>
                                <ul>
                                    <li><a href='' class='menu-b'>Phòng chat a</a></li>
                                    <li><a href='' class='menu-b'>Chat với admin</a></li>
                                </ul>
                            </div>
                            <div id='tutao' class='chatarea-right-clist'>
                                <ul>
                                    <li><a href='' class='menu-b'>Phòng chat a</a></li>
                                    <li><a href='' class='menu-b'>Chat với admin</a></li>
                                </ul>
                            </div>
                        </div>
                        
                        <div id='search-user'>
                            <div id='search-title'><img src='Images/search-icon.png' alt='search-icon'></div>
                            <input type='text' name='search' id='search-text' >
                        </div>                        
                        <div id='chatarea-right-bottom'>
                            Ngôn ngữ trò chuyện:
                            <div id='chatarea-languae'>
                                <select name='lang-chat' id='chat-select'>
                                    <option value='vi'>Tiếng Việt</option>
                                    <option value='en'>Tiếng Anh</option>
                                </select>
                            </div>                            
                        </div>
                    </div>
                </div><!-- end chatarea-right -->
            </div>
        </div>
    </body>
</html>
